<template>
	<div>
		<div class="breadcrumb">
			<el-button type="text" @click="$router.back()" icon="el-icon-arrow-left" style="font-size: 14px;">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">教育经历</div>
			</div>
			<div>
				<el-form :model="formInline" class="demo-form-inline" label-width="100px">
					<el-row>
						<el-col :span="7">
							<el-form-item label="入学日期：">
								<el-date-picker v-model="formInline.startDate" class="formDate" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择年月"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="毕业日期：">
								<el-date-picker v-model="formInline.endDate" class="formDate" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择年月"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="毕业学校：">
						<el-input v-model="formInline.graduateSchool" class="formInput" placeholder="请输入毕业学校"></el-input>
					</el-form-item>
					<el-form-item label="院系：">
						<el-input v-model="formInline.colleges" class="formInput" placeholder="请输入院系"></el-input>
					</el-form-item>
					<el-form-item label="专业：">
						<el-input v-model="formInline.major" class="formInput" placeholder="请输入专业"></el-input>
					</el-form-item>
					<el-form-item label="学历：">
						<el-input v-model="formInline.education" class="formInput" placeholder="请输入学历"></el-input>
					</el-form-item>
					<el-form-item label="证书：">
						<el-upload
						  class="avatar-uploader"
						  action=""
						  :http-request="uploadFile"
						  :show-file-list="false">
						  <img v-if="formInline.image" :src="formInline.image" class="avatar">
						  <div v-else>
							  <i  class="el-icon-plus avatar-uploader-icon"></i>
							  <p><span>上传证书图片</span></p>
						  </div>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="bottomBtns">
			<!-- <el-button type="primary" round @click="$router.back()">返回</el-button> -->
			<el-button type="primary" round @click="submit">完成</el-button>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data() {
			return {
				formInline: {
					startDate: '', // 开始时间
					endDate: '', // 结束时间
					graduateSchool: '', // 学校
					colleges: '', // 院系
					major: '', // 专业
					isOpen: '1', // 是否公开
					education: '', // 学历
					image: '', // 学历照片
				},
				isUpdete: false,
				dataIndex: ''
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 11)
		},
		mounted() {
			if (this.$route.query.index > -1) {
				this.dataIndex = this.$route.query.index
				// 页面数据渲染
				add.education.getEducation(this.dataIndex, (data) => {
					this.formInline.startDate = data.startDate
					this.formInline.endDate = data.endDate
					this.formInline.graduateSchool = data.graduateSchool
					this.formInline.colleges = data.colleges
					this.formInline.major = data.major
					this.formInline.isOpen = data.isOpen
					this.formInline.education = data.education
					this.formInline.image = data.image
				})
				this.isUpdete = true
			} else {
				this.isUpdete = false
			}
		},
		watch: {


		},
		methods: {
			submit(){
				if(!this.formInline.startDate){
					this.$message.error('请选择入学时间')
					return
				} else if(!this.formInline.endDate){
					this.$message.error('请选择毕业时间')
					return
				} else if(new Date(this.formInline.endDate) < new Date(this.formInline.startDate)){
					this.$message.error('毕业时间不能早于入学时间')
					return
				} else if(!this.formInline.graduateSchool){
					this.$message.error('请输入学校')
					return
				} else if(!this.formInline.colleges){
					this.$message.error('请输入院系')
					return
				} else if(!this.formInline.education){
					this.$message.error('请输入学历')
					return
				}
				//  else if(!this.formInline.image){
				// 	this.$message.error('请上传证书图片')
				// 	return
				// }
				if(!this.isUpdete){
					add.education.addition(this.formInline)
				} else {
					add.education.update(this.formInline, this.dataIndex)
				}
				this.$router.back()
			},
			uploadFile(file){
				// 上传文件
				let File = file.file
				add.uploadFile(File, (data) => {
					this.formInline.image = data
					this.$message.success('上传成功')
				})
				
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		min-height: 595px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}
	.formInput{
		width: 420px;
	}
	.formDate{
		width: 150px;
	}
	.avatar-uploader>>>.el-upload {
	    /* border: 1px dashed #d9d9d9; */
		border: 1px solid #d9d9d9;
	    /* border-radius: 6px; */
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
		color: #AAAAAA;
	  }
	  .el-upload p{
		  height: 32px;
		  margin-top: -32px;
		  font-size: 12px;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 240px;
	    height: 150px;
	    line-height: 150px;
	    text-align: center;
	  }
	  .avatar {
	    width: 240px;
	    height: 150px;
	    display: block;
	  }
	  .bottomBtns{
	  	width: 100%;
	  	border-top: 1px solid #DCDCDC;
	  	padding: 30px 0;
	  	text-align: center;
	  }
	  .bottomBtns button{
	  	width: 100px;
	  }
</style>
